<template>
  <div class="app-container">
    <div class="mb-22">
      <el-button type="success" v-hasPermi="['distribute:level:add']" @click="handleAdd">添加</el-button>
    </div>

    <YxhyTableData :columns="columns" :data="tableList" :loading="loading">
      <!-- 插槽内容 -->
      <template #action>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <div class="table-action-panel">
              <el-button type="success" size="mini" v-hasPermi="['distribute:level:edit']" @click="handleUpdate(scope.row)">编辑</el-button>
              <template v-if="scope.row.flag === 1">
                <el-button type="danger" size="mini" v-hasPermi="['distribute:level:editFlag']" @click="handleUpdateFlag(scope.row)">禁用</el-button>
              </template>
              <template v-else-if="scope.row.flag === 0">
                <el-button type="primary" size="mini" v-hasPermi="['distribute:level:editFlag']" @click="handleUpdateFlag(scope.row)">启用</el-button>
              </template>
            </div>
          </template>
        </el-table-column>
      </template>
    </YxhyTableData>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryPage.pageNum"
      :limit.sync="queryPage.limit"
      @pagination="init"
    />

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="状态" prop="flag">
          <el-switch v-model="form.flag" />
        </el-form-item>
        <el-form-item label="等级" prop="level">
          <YxhySelect :value.sync="form.level" :columns="levelColumns" />
        </el-form-item>
        <el-form-item label="分成比例" prop="dd_into_rate">
          <div class="flex ai-center">
            <el-input v-model="form.dd_into_rate" placeholder="请输入分成比例" type="number" style="width: 57%" />
            <p class="ml-5">%</p>
          </div>
        </el-form-item>
        <el-form-item label="订单比例" prop="order_rate">
          <div class="flex ai-center">
            <el-input v-model="form.order_rate" placeholder="请输入分成比例" type="number" style="width: 57%" />
            <p class="ml-5">%</p>
          </div>
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input v-model="form.note" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { queryPageClassify, addClassify, editClassify, CLASSIFY_STATUS } from '@/api/config/classify.js'
import { columnsStatic, LEVEL_FLAG, LEVEL_LEVEL } from './Ds.js'
import { queryLevelList, updateLevelFlag, addLevel, updateLevel } from '@/api/distribute/level'
export default {
  name: 'LevelList',
  data() {
    return {
      // 总条数
      total: 0,
      // 表格数据
      tableList: [],
      // 分页参数
      queryPage: {
        pageNum: 1,
        limit: 10
      },
      loading: false,
      // 表格列
      columns: columnsStatic,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        flag: true,
        level: undefined,
        dd_into_rate: undefined,
        order_rate: undefined,
        note: undefined
      },
      // 表单校验
      rules: {
        level: [
          { required: true, message: '请选择等级', trigger: ['blur', 'change'] }
        ],
        dd_into_rate: [
          { required: true, message: '请输入分成比例', trigger: ['blur', 'change'] }
        ],
        order_rate: [
          { required: true, message: '请输入订单比例', trigger: ['blur', 'change'] }
        ]
      },

      levelColumns: [
        {
          label: '优质',
          value: 1
        },
        {
          label: '潜力',
          value: 2
        },
        {
          label: '普通',
          value: 3
        }
      ]
    }
  },
  computed: {
    isEdit() {
      return ![undefined, ''].includes(this.form.id)
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      this.loading = true
      const res = await queryLevelList({
        ...this.queryPage
      })
      res.data.map(e => {
        const { flag, level, note, dd_into_rate, order_rate } = e
        e.flag_text = LEVEL_FLAG[flag]
        e.level_text = LEVEL_LEVEL[level]
        e.dd_into_rate_text = `${dd_into_rate}%`
        e.order_rate_text = `${order_rate}%`
        e.note = note || '-'
      })
      this.tableList = res.data
      this.total = res.total
      this.loading = false
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        flag: true,
        level: undefined,
        dd_into_rate: undefined,
        order_rate: undefined,
        note: undefined
      }
      this.resetForm('formRef')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryPage.pageNum = 1
      this.init()
    },
    /** 清空搜索按钮操作 */
    handleClear() {
      this.init()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加等级'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      const { id, flag } = row

      this.reset()
      this.form = {
        ...row,
        flag: flag === 1
      }
      this.open = true
      this.title = '修改等级'
    },
    /** 启用/禁用按钮操作 */
    async handleUpdateFlag(row) {
      const { id, flag } = row
      const transFlag = flag === 1 ? 0 : 1
      await updateLevelFlag({
        id,
        flag: transFlag
      })
      row.flag = transFlag
      row.flag_text = LEVEL_FLAG[transFlag]
      this.$modal.msgSuccess('操作成功')
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.form.flag = this.form.flag ? 1 : 0
          if (this.form.id != undefined) {
            updateLevel(this.form).then(res => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.init()
            })
          } else {
            addLevel(this.form).then(res => {
              this.$modal.msgSuccess('添加成功')
              this.open = false
              this.init()
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
